<template>
  <div class="register-box">
    <div class="main">
      <div v-show="activeName === 'company' || activeName === 'FCcompany'">
        <el-form
          ref="ruleForm"
          class="form-class"
          :rules="rules"
          label-width="155px"
          :model="ruleForm"
          v-if="activeName === 'company' || activeName === 'FCcompany'"
        >
          <!-- 浏览器默认记住密码 -->
          <el-form-item class="form-item-class">
            <input placeholder="请输入您的邮箱" />
            <input type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="companyType" label="企业类型">
            <el-select
              v-model="ruleForm.companyType"
              placeholder="请选择企业类型"
            >
              <el-option
                v-for="(item, index) in companyTypeArr"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="companyItem" prop="companyName" label="公司名称">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'companyName')"
              v-model="ruleForm.companyName"
              placeholder="请输入营业执照上的公司名称"
              clearable
            />
            <span class="tip" style="font-size: 12px;"
              ><span style="color: red;">*</span
              >注：此处企业名称必须与企业营业执照上的名称一致</span
            >
          </el-form-item>
          <el-form-item prop="unifiedSocialCreditCode" label="统一社会信用代码">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'unifiedSocialCreditCode')"
              v-model="ruleForm.unifiedSocialCreditCode"
              placeholder="请输入社会信用代码"
              clearable
            />
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'username')"
              v-model="ruleForm.username"
              placeholder="请设置字母+数字组合"
              clearable
            />
          </el-form-item>
          <el-form-item prop="email" label="邮箱">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'email')"
              v-model="ruleForm.email"
              placeholder="请输入您的邮箱号"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'password')"
              type="password"
              v-model="ruleForm.password"
              placeholder="请设置2-20位字母、数字及符号"
              autocomplete="off"
              show-password
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'checkPass')"
              type="password"
              v-model="ruleForm.checkPass"
              placeholder="请再次确认密码"
              autocomplete="off"
              show-password
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              @input.native="onInputOnlyNumber($event, 'phone')"
              v-model="ruleForm.phone"
              placeholder="请输入手机号码"
              clearable
              maxlength="11"
            />
          </el-form-item>
          <el-form-item
            class="phoneCode"
            label="手机验证码"
            prop="verificationCode"
          >
            <el-input
              @input.native="onInputOnlyNumber($event, 'verificationCode')"
              v-model="ruleForm.verificationCode"
              placeholder="请输入手机验证码"
              clearable
              maxlength="6"
            />
            <el-button
              @click="sendCode"
              type="primary"
              :disabled="sendCodeDiabled"
              >{{ sendCodeTitle }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="ruleForm.userAgree" class="el-checkbox" />
            <span>
              注册代表您已同意
              <b class="user-agreement" @click.stop="showAgreement"
                >《数字化平台用户注册协议》</b
              >
            </span>
          </el-form-item>
          <el-form-item>
            <el-button
              :disabled="!ruleForm.userAgree"
              @click="register"
              :loading="submitLoading"
              type="primary"
              clearable
              class="submit"
              >立即提交</el-button
            >
          </el-form-item>
          <el-form-item>
            <span>已有账号?</span>
            <span style="color: #4d84ff;" @click="goLogin">立即登录>></span>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="activeName === 'hospital'">
        <el-form
          ref="ruleForm"
          class="form-class"
          :rules="rules"
          label-width="155px"
          :model="ruleForm"
          v-if="activeName === 'hospital'"
        >
          <el-form-item label="医疗机构名称" prop="hospitalName">
            <el-select
              v-model="ruleForm.hospitalName"
              filterable
              remote
              reserve-keyword
              placeholder="医疗机构名称"
              :remote-method="searchHospital"
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'hospitalName')"
              @change="hospitalNameChange"
              :loading="searchHospitalLoading"
            >
              <el-option
                v-for="item in hospitalList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
            <!-- <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'hospitalName')"
              v-model="ruleForm.hospitalName"
              placeholder="请输入医疗机构名称"
              clearable
            /> -->
          </el-form-item>
          <el-form-item
            label="医疗机构登记号"
            prop="hospitalRegistrationNumber"
          >
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'hospitalRegistrationNumber')"
              v-model="ruleForm.hospitalRegistrationNumber"
              placeholder="请输入医疗机构登记号"
              clearable
              disabled
            />
            <!-- <span style="font-size: 12px;">注意：非公立医院请输入统一社会信用代码</span> -->
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'username')"
              v-model="ruleForm.username"
              placeholder="请输入用户名"
              clearable
            />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'email')"
              v-model="ruleForm.email"
              placeholder="请输入邮箱"
              clearable
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'password')"
              type="password"
              show-password
              v-model="ruleForm.password"
              placeholder="请输入密码"
              clearable
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'checkPass')"
              type="password"
              show-password
              v-model="ruleForm.checkPass"
              placeholder="请再次输入密码"
              clearable
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              @input.native="onInputOnlyNumber($event, 'phone')"
              v-model="ruleForm.phone"
              placeholder="请输入手机号"
              clearable
              maxlength="11"
            />
          </el-form-item>
          <el-form-item
            class="phoneCode"
            label="手机验证码"
            prop="verificationCode"
          >
            <el-input
              @input.native="onInputOnlyNumber($event, 'verificationCode')"
              v-model="ruleForm.verificationCode"
              placeholder="请输入手机验证码"
              clearable
              maxlength="6"
            />
            <el-button
              @click="sendCode"
              type="primary"
              :disabled="sendCodeDiabled"
              >{{ sendCodeTitle }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="ruleForm.userAgree" />
            <span>
              注册代表您已同意
              <b class="user-agreement" @click.stop="showAgreement"
                >《数字化平台用户注册协议》</b
              >
            </span>
          </el-form-item>
          <el-form-item>
            <el-button
              :disabled="!ruleForm.userAgree"
              @click="register"
              :loading="submitLoading"
              type="primary"
              clearable
              class="submit"
              >立即提交</el-button
            >
          </el-form-item>
          <el-form-item>
            已有账号?
            <el-button color="#4D84FF" type="text" @click="goLogin"
              >立即登录>></el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div v-show="activeName === 'person'">
        <el-form
          ref="ruleForm"
          class="form-class"
          :rules="rules"
          label-width="155px"
          :model="ruleForm"
          v-if="activeName === 'person'"
        >
          <!-- 浏览器默认记住密码 -->
          <el-form-item class="form-item-class">
            <input placeholder="请输入您的邮箱" />
            <input type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="companyNamePerson" label="所属公司">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'companyNamePerson')"
              v-model="ruleForm.companyNamePerson"
              placeholder="请输入"
              clearable
            />
            <!-- <el-select
                  v-model="ruleForm.companyType"
                  placeholder="请选择">
                  <el-option
                    v-for="(item,index) in companyTypeArr"
                    :key="index"
                    :label="item.lab"
                    :value="item.val"
                  />
              </el-select>-->
            <!-- <span>注意：请选择你所在的企业名称，若未找到请选择企业注册完成认证。</span> -->
          </el-form-item>

          <el-form-item label="用户名" prop="username">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'username')"
              v-model="ruleForm.username"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item prop="email" label="邮箱">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'email')"
              v-model="ruleForm.email"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'password')"
              type="password"
              v-model="ruleForm.password"
              placeholder="请输入"
              autocomplete="off"
              show-password
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              @compositionstart.native="chinesesStart"
              @compositionend.native="chinesesEnd"
              @input.native="onInput($event, 'checkPass')"
              type="password"
              v-model="ruleForm.checkPass"
              placeholder="请输入"
              autocomplete="off"
              show-password
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              @input.native="onInputOnlyNumber($event, 'phone')"
              v-model="ruleForm.phone"
              placeholder="请输入"
              clearable
              maxlength="11"
            />
          </el-form-item>
          <el-form-item
            class="phoneCode"
            label="手机验证码"
            prop="verificationCode"
          >
            <el-input
              @input.native="onInputOnlyNumber($event, 'verificationCode')"
              v-model="ruleForm.verificationCode"
              placeholder="请输入"
              clearable
              maxlength="6"
            />
            <el-button
              @click="sendCode"
              type="primary"
              :disabled="sendCodeDiabled"
              >{{ sendCodeTitle }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="ruleForm.userAgree" />
            <span>
              注册代表您已同意
              <b class="user-agreement" @click.stop="showAgreement"
                >《数字化平台用户注册协议》</b
              >
            </span>
          </el-form-item>
          <el-form-item>
            <el-button
              :disabled="!ruleForm.userAgree"
              @click="register"
              :loading="submitLoading"
              type="primary"
              clearable
              class="submit"
              >立即提交</el-button
            >
          </el-form-item>
          <el-form-item>
            已有账号?
            <el-button color="#4D84FF" type="text" @click="goLogin"
              >立即登录>></el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="bgImg">
        <img :src="img.registerBg2" alt="图片" />
        <div></div>
      </div>
    </div>
    <!-- 用户协议弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="agreementVisible"
      width="1000px"
      center
    >
      <div class="user-agreement-detail">
        <agreementCard></agreementCard>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="agreementVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAgreement">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import {companyTypeArr} from '@const/common'
import {username, realName, phone, email} from '@const/formValidate.js'
import {nameIsExit} from '@const/api_aggregation.js'
import {
  sendRegistVerificationCode,
  registerRemoveDoc,
  commonGetAllEnums
} from '@const/api_staffCenter.js'
import {companyInfoAdminFindHospital} from '@const/dataCenter.js'
import {
  findCompanyByCompanyName,
  isExistHospitalRegistrationNumber,
  isExistUnifiedSocialCreditCode
} from '@const/api_authCenter.js'
import md5 from 'js-md5'
import registAgreementCard from '@/moduleComponents/login/hospital/registAgreementCard'
const TIME_COUNT = 60
import {hasIn} from 'lodash'
export default {
  layout: 'login',
  name: 'Register',
  components: {agreementCard: registAgreementCard},
  data() {
    // 密码
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value)) {
          callback(new Error('密码为6-16位数字字母组合'))
          return false
        }
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    // 再次确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    // 公司名称（个人）
    let getcompanyPerson = (rule, value, callback) => {
      this.$axios({
        method: 'get',
        url: nameIsExit,
        params: {
          companyName: value
        }
      })
        .then(data => {
          if (!data.data.payload) {
            callback(new Error('该公司未在平台注册或认证'))
          } else {
            callback()
          }
        })
        .finally(() => {})
    }
    // 公司名称（企业）
    let getcompanyName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入公司名称'))
        return false
      }
      this.$axios({
        method: 'get',
        url: nameIsExit,
        params: {
          companyName: value
        }
      })
        .then(data => {
          if (data.data.payload) {
            callback(new Error('该公司名称已存在，请联系管理员'))
          } else {
            callback()
          }
        })
        .finally(() => {})
    }
    // 医疗机构名称
    let hospitalNameValidate = (rule, value, callback) => {
      if (/^[\^\\%#$@*&\*~'\?\/\<\>\|\"`]+$/g.test(value)) {
        callback(new Error('医疗机构名称不能包含特殊字符！'))
        return
      }
      this.$axios({
        method: 'get',
        url: nameIsExit,
        params: {
          companyName: value
        }
      })
        .then(res => {
          if (!res.data.payload) {
            callback()
          } else {
            callback(
              new Error(
                // `该公司已经在本系统中注册，请与该公司的联系人联系，联系人：${res.data.payload.linkMan}；联系方式：${res.data.payload.linkPhone}；注册手机号：${res.data.payload.registerPhone}`
                `您输入的医疗机构名称已存在，请联系管理员`
              )
            )
          }
        })
        .catch(() => {
          callback(new Error('验证失败，请重新输入'))
        })
    }
    // 医疗机构登记号
    let hospitalCodeValidate = (rule, value, callback) => {
      this.$axios({
        method: 'get',
        url: isExistHospitalRegistrationNumber,
        params: {
          hospitalRegistrationNumber: value
        }
      })
        .then(res => {
          if (!res.data.payload) {
            callback()
          } else {
            callback(new Error('您输入的医疗机构登记号已存在，请联系管理员'))
          }
        })
        .catch(() => {})
    }
    // 统一社会信用代码
    let companyCreditcodeValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入统一社会信用代码'))
        return false
      }
      if (!/^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/.test(value)) {
        callback(new Error('请输入正确的18位统一社会信用代码'))
        return false
      }
      this.$axios({
        method: 'get',
        url: isExistUnifiedSocialCreditCode,
        params: {
          unifiedSocialCreditCode: value
        }
      })
        .then(res => {
          if (!res.data.payload) {
            callback()
          } else {
            callback(new Error('该统一社会信用代码已存在，请联系管理员'))
          }
        })
        .catch(() => {})
    }
    // 用户名
    let validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
        return false
      }
      if (!/^[_0-9a-zA-Z\u4E00-\u9FA5]{2,16}$/.test(value)) {
        callback(new Error('只能输入2-16个字母、数字或中文'))
        return false
      }
      callback()
    }
    // 邮箱
    let validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱地址'))
        return false
      }
      if (
        !/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(
          value
        )
      ) {
        callback(new Error('请输入正确的邮箱地址'))
        return false
      }
      callback()
    }
    // 手机号码
    let validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'))
        return false
      }
      callback()
    }
    return {
      chinesesInput: false,
      activeName: this.$route.query.activeName,
      submitLoading: false, // 提交按钮的loading
      ruleForm: {
        // 社会统一信用代码
        unifiedSocialCreditCode: '',
        // 医疗机构登记号
        hospitalRegistrationNumber: '',
        // 个人企业名称
        companyNamePerson: '',
        // 企业名称
        companyName: '',
        // 医院名称
        hospitalName: '',
        // 企业类型
        companyType: '',
        username: '',
        email: '',
        password: '',
        checkPass: '',
        phone: '',
        verificationCode: '',
        // 医疗机构注册是否同意用户协议
        userAgree: false
      },
      companyTypeArr: [],
      // 注册时手机发送验证码携带的前缀
      prefix: 'registerVerificationcode',
      rules: {
        companyType: [
          {required: true, message: '请选择企业类型', trigger: 'change'}
        ],
        unifiedSocialCreditCode: [
          // {
          //   required: true,
          //   message: '请输入统一社会信用代码',
          //   trigger: 'blur'
          // },
          // {
          //   required: true,
          //   pattern: /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/,
          //   message: '请输入正确的18位统一社会信用代码'
          // },
          {
            required: true,
            validator: companyCreditcodeValidate,
            // message: '您输入的统一社会信用代码有误',
            trigger: 'blur'
          }
        ],
        companyNamePerson: [
          {required: true, message: '请输入公司名称', trigger: 'blur'},
          {validator: getcompanyPerson, trigger: 'blur'}
        ],
        hospitalName: [
          {required: true, message: '请输入医疗机构名称', trigger: 'blur'},
          {validator: hospitalNameValidate, trigger: 'change'}
        ],
        companyName: [
          // {required: true, message: '请输入公司名称', trigger: 'blur'},
          {required: true, validator: getcompanyName, trigger: 'blur'}
        ],
        // hospitalRegistrationNumber: [
        //   {
        //     required: true,
        //     message: '请输入医疗机构登记号',
        //     trigger: 'blur',
        //   },
        //   {
        //     pattern: /^[0-9A-Za-z]+$/,
        //     message: '请输入字母或数字'
        //   },
        //   {validator: hospitalCodeValidate, trigger: 'blur'},
        // ],
        username: [
          {required: true, validator: validateUsername, trigger: 'blur'}
        ],
        password: [
          // {
          //   pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
          //   message: '密码为6-16位数字字母组合'
          // },
          {required: true, validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {required: true, validator: validatePass2, trigger: 'blur'}
        ],
        email: [{required: true, validator: validateEmail, trigger: 'blur'}],
        phone: [{required: true, validator: validatePhone, trigger: 'blur'}]
      },
      count: '',
      sendCodeTitle: '验证码',
      sendCodeDiabled: false,
      authId: '',
      agreementVisible: false,
      img: {
        registerBg2: require('@assets/img/home/registerbg2.png')
      },
      searchHospitalLoading: false,
      hospitalList: []
    }
  },
  created() {
    this.authId = this.$route.query.authId || ''
    this.getAllEnums() // 枚举
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.activeName = val.query.activeName
      },
      deep: true
    }
  },
  methods: {
    // 空格转空
    onInput(event, key) {
      if (this.chinesesInput) return
      const value = event.target.value
      event.target.value = value.replace(/\s/g, '')
      this.ruleForm[key] = event.target.value
    },
    chinesesStart() {
      this.chinesesInput = true
    },
    chinesesEnd() {
      this.chinesesInput = false
    },
    // 非数字转空
    onInputOnlyNumber(event, key) {
      const value = event.target.value
      event.target.value = value.replace(/[^\d]/g, '')
      this.ruleForm[key] = event.target.value
    },
    getAllEnums() {
      this.$axios({
        method: 'GET',
        url: commonGetAllEnums
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.companyTypeArr = []
          data.companyTypeEnum.forEach(item => {
            if (item.value !== 'HO' && item.value !== 'MM') {
              this.companyTypeArr.push(item)
            }
          })
        })
        .finally(() => {})
    },
    // 医疗机构名称
    searchHospital(name = '') {
      if (name.trim() === '') {
        return false
      }
      this.searchHospitalLoading = true
      console.log('814name', name)
      this.$axios({
        method: 'GET',
        url: `${companyInfoAdminFindHospital}?hospitalName=${name}`
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          console.log('802data', data)
          this.hospitalList = []
          this.hospitalList = data.map(item => {
            return {
              label: item.fullName,
              value: item.companyCode
            }
          })
        })
        .finally(() => {
          this.searchHospitalLoading = false
        })
    },
    hospitalNameChange(val) {
      if (val === '') {
        return false
      }
      let selectedWorkName = {}
      selectedWorkName = this.hospitalList.find(item => {
        return item.label === val
      })
      this.ruleForm.hospitalRegistrationNumber = selectedWorkName.value
    },
    // 显示注册医疗机构的用户协议
    showAgreement() {
      this.agreementVisible = true
    },
    // 确认用户协议
    confirmAgreement() {
      this.agreementVisible = false
      this.ruleForm.userAgree = true
    },
    // 原来tab切换
    handleClick(tab, event) {
      this.activeName = tab.name
      this.ruleForm.userAgree = false
      this.$refs['ruleForm'].resetFields() //切换tab清除填写内容
    },
    countDown() {
      this.count = TIME_COUNT
      let timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--
          this.sendCodeTitle = `${this.count}秒后重新获取`
        } else {
          this.sendCodeTitle = '重新获取'
          this.timer = null
          this.sendCodeDiabled = false
          clearInterval(timer)
        }
      }, 1000)
    },
    sendCode() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.sendCodeDiabled = true
          this.$axios({
            method: 'post',
            url: sendRegistVerificationCode,
            data: {
              phone: this.ruleForm.phone,
              prefix: this.prefix
            }
          })
            .then(data => {
              if (data.data.code * 1 === 0) {
                this.$message({
                  message: '验证码发送成功！',
                  type: 'success'
                })
                this.countDown()
              }
            })
            .catch(res => {
              this.sendCodeDiabled = false
            })
            .finally(() => {})
        } else {
          return false
        }
      })
    },
    register() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          let companyName = ''
          if (this.activeName === 'person') {
            this.ruleForm.companyType = 'person'
            companyName = this.ruleForm.companyNamePerson
          } else if (this.activeName === 'company') {
            companyName = this.ruleForm.companyName
          } else {
            companyName = this.ruleForm.hospitalName
            this.ruleForm.companyType = 'HO'
          }

          let {
            username,
            password,
            phone,
            companyType,
            email,
            verificationCode,
            unifiedSocialCreditCode,
            hospitalRegistrationNumber
          } = this.ruleForm

          if (!verificationCode) {
            this.$message({type: 'warning', message: '请输入验证码'})
            return
          }
          if (!/^[0-9]{6}$/.test(verificationCode)) {
            this.$message({type: 'warning', message: '请输入6位数字验证码'})
            return
          }
          if (this.activeName === 'hospital' && !this.ruleForm.userAgree) {
            this.$message({type: 'warning', message: '请确认勾选用户协议'})
            return
          }
          this.submitLoading = true
          let registerType = this.ruleForm.companyType
          // 不影响其它逻辑的情况下加两个兼容判断  FCONE=医疗器械生产企业   FCTWO=医疗器械生产+经营企业
          // if (
          //   this.activeName === 'company' &&
          //   (companyType === 'FC' || companyType === 'FCONE')
          // ) {
          //   registerType = 'manufacturingEnterprise'
          // } else if (this.activeName === 'company' && companyType === 'FCTWO') {
          //   registerType = 'manufacturingProductionEnterprise'
          // } else if (this.activeName === 'company' && companyType === 'AM') {
          //   registerType = 'thirdAudit'
          // } else if (this.activeName === 'company' && companyType === 'SV') {
          //   registerType = 'serviceProvider'
          // } else {
          //   registerType = this.activeName
          // }
          this.$axios({
            method: 'post',
            url: registerRemoveDoc,
            params: {
              companyType
            },
            data: {
              username,
              password: md5(password),
              companyName,
              phone,
              companyType,
              email,
              unifiedSocialCreditCode,
              hospitalRegistrationNumber,
              verificationCode
            }
          })
            .then(res => {
              if (res.data.code === '0') {
                this.$message({
                  message: '注册成功！',
                  type: 'success'
                })
                this.goLogin()
              }
              // else {
              //   this.$message({type: 'error', message: res.data.msg})
              // }
            })
            .finally(() => {
              this.submitLoading = false
            })
        } else {
          return false
        }
      })
    },
    goLogin() {
      if (this.$route.query.id) {
        this.$router.push({
          path: this.$PATH_CONST.login_page,
          query: {
            id: this.$route.query.id,
            userName: this.ruleForm.username
          }
        })
      } else {
        this.$router.push({
          path: this.$PATH_CONST.login_page,
          query: {
            userName: this.ruleForm.username
          }
        })
      }
    },
    // 设置默认的统一社会信用代码
    _initUnifiedSocialCreditCode() {
      let unifiedSocialCreditCode =
        this.$route.query.unifiedSocialCreditCode || ''
      if (unifiedSocialCreditCode) {
        this.ruleForm.unifiedSocialCreditCode = unifiedSocialCreditCode
      }
    }
  },

  mounted() {
    this._initUnifiedSocialCreditCode()
  }
}
</script>
<style lang="less">
@import '../m-front-common/pc/assets/var.less';

.register-box {
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    #f4f6fb
    url('../../../m-front-common/pc/assets/img/home/registerbg1.png') no-repeat;
  padding: 30px;
  .el-input {
    width: 330px;
    font-size: 16px;
  }

  .el-button {
    padding: 12px 20px;
  }

  .user-agreement {
    font-weight: 900;
    color: #2371c5;
    &:hover {
      cursor: pointer;
    }
  }

  .main {
    position: relative;
    width: 65%;
    min-width: 700px;
    margin: 0 auto;
    padding: 15px;
    background-color: #fff;
    .bgImg {
      position: absolute;
      right: 0;
      bottom: 0;
      div {
        width: 100px;
        height: 100px;
        background: #fff;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
      }
      img {
        position: absolute;
        right: -60px;
        bottom: -60px;
        z-index: 0;
      }
    }

    .el-form-item__label {
      font-size: 16px;
    }

    .form-class {
      position: relative;
      overflow: hidden;
      width: 575px;
      margin: 0 auto;
      margin-top: 38px;

      .form-item-class {
        position: absolute;
        left: 99999999px;
      }
      .submit {
        width: 330px;
      }
      .companyItem {
        position: relative;
        .tip {
          position: absolute;
          left: 0;
          bottom: -30px;
        }
        .el-form-item__error {
          width: 100%;
          background: #fff;
        }
      }
      .phoneCode {
        position: relative;
        .el-button {
          position: absolute;
          right: 91px;
          top: 2px;
          width: 120px;
          height: 38px;
          background: #f4f4f4;
          border: none;
          border-left: 1px solid #dcdfe6;
          border-radius: 0 2px 2px 0;
          color: #666;
        }
      }
    }
  }
  .el-checkbox {
    margin: 0 !important;
  }
}
</style>
